<template>
  <div class="common-layout" :class="{ mobile: !showBack }">
    <el-container ref="containerRef">
      <el-header class="header" id="menu" :class="{ mobile: !showBack }">
        <!-- PC -->
        <el-row style="height: 100%" v-if="showBack">
          <el-col :span="8">
            <el-row class="menu-tag" justify="center" align="middle">
              <el-col :span="4">
                <el-icon :size="40"><ChromeFilled /></el-icon>
              </el-col>
              <el-col :span="4">
                <div
                  @click="toPage('/recomm', 1)"
                  :class="{ activeMenu: menuId === 1 ? true : false }"
                >
                  推荐
                </div>
              </el-col>
              <el-col :span="4">
                <div
                  @click="toPage('/client/hit', 2)"
                  :class="{ activeMenu: menuId === 2 ? true : false }"
                >
                  热播
                </div>
              </el-col>
              <!-- <el-col :span="4">
                <div
                  @click="toPage('/client/concern', 3)"
                  :class="{ activeMenu: menuId === 3 ? true : false }"
                >
                  关注
                </div>
              </el-col> -->
              <el-col :span="4">
                <router-link to="/client/classify">分类</router-link>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="16">
            <el-row class="menu-tag" justify="end" align="middle">
              <el-col :span="6">
                <el-input placeholder="搜索" v-model="search">
                  <template #append>
                    <el-button :icon="Search" type="text" @click="toSearch" />
                  </template>
                </el-input>
              </el-col>
              <el-col :span="4" :offset="4">
                <router-link to="/center">
                  <el-avatar :src="userInfo?.avatar" :size="40">登录</el-avatar>
                </router-link>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <!-- H5 -->
        <el-row
          v-else
          justify="space-between"
          align="middle"
          style="height: 100%"
        >
          <el-col :span="4">
            <el-icon :size="40"><ChromeFilled /></el-icon>
          </el-col>
          <el-col :span="3">
            <router-link to="/recomm">推荐</router-link>
          </el-col>
          <el-col :span="3">
            <router-link to="/client/hit">热播</router-link>
          </el-col>
          <!-- <el-col :span="3">
            <router-link to="/client/concern">关注</router-link>
          </el-col> -->
          <el-col :span="3">
            <router-link to="/client/classify">分类</router-link>
          </el-col>
          <el-col :span="4">
            <router-link to="/client/search">
              <el-icon :size="20"><Search /></el-icon>
            </router-link>
          </el-col>
          <el-col :span="2">
            <router-link to="/center">
              <el-avatar :src="userInfo?.avatar"> 登录 </el-avatar>
            </router-link>
          </el-col>
        </el-row>
      </el-header>
      <el-main class="main not-scrool">
        <router-view></router-view>
      </el-main>
    </el-container>
  </div>
  <menu-silde ref="silderRef"></menu-silde>
  <page-loading-vue v-if="false"></page-loading-vue>
</template>
<script setup>
import pageLoadingVue from "@/components/other/page-loading.vue";
import { ChromeFilled, Search } from "@element-plus/icons-vue";
import { onMounted, computed, ref } from "vue";
import menuSilde from "@/components/other/menu-silde.vue";
import { useRouter } from "vue-router";

// 判断是否为移动端
const showBack = computed(() => {
  const widthH5 = window.innerWidth;
  if (widthH5 < 500) {
    localStorage.setItem("mobile", false);
    return false;
  }
  localStorage.setItem("mobile", true);
  return true;
});
const userInfo = ref();

const search = ref("");

const router = useRouter();
const menuId = ref(1);

const toSearch = () => {
  router.push({
    path: "/client/search",
    query: { name: search.value },
  });
};
const toPage = (path, type) => {
  localStorage.setItem("menuId", type);
  menuId.value = type;
  router.push(path);
};

const silderRef = ref();

onMounted(() => {
  let u = localStorage.getItem("user");
  if (u !== null) {
    userInfo.value = JSON.parse(u);
    console.log(userInfo.value);
  }
  menuId.value = localStorage.getItem("menuId");
});
</script>

<style scoped lang="scss">
.menu-tag {
  font-size: 18px;
  color: aliceblue;
  height: 100%;
  & > div {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    &:hover {
      cursor: pointer;
    }
  }
}

.header {
  position: fixed;
  width: 100%;
  z-index: 100;
  background: #181623;
  border-bottom: 1px #eee solid;
  .search {
    border: #b6b6b6 1px solid;
    border-radius: 30px;
    padding: 0 20px;
    height: 35px;
    display: flex;
    flex-direction: row;
    align-items: center;
    .inp {
      border: none;
      height: 6.66vw;
      top: 0;
      line-height: 6.66vw;
      margin-left: 1vw;
      color: #ccc;
    }
  }
}

.mobile {
  background: #fff;
}

.main {
  min-height: calc(100vh - 60px);
  margin-top: 60px;
  background: #f2f0f4;
}

.activeMenu {
  color: #ff6600;
  border-bottom: #ff6600 2px solid;
}

.el-col {
  text-align: center;
}
</style>
